<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glassmorphism | Magic Line Indicator 4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href="../index.html"><ion-icon name="accessibility-outline"></ion-icon></a></li>
        <li><a href="../9x9/9x9index.html" ><ion-icon name="calculator-outline"></ion-icon></a></li>
        <li class="active" onclick="startGame()"><a href="#"><ion-icon name="apps-outline"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="chatbubble-outline"></ion-icon></a></li>
        <div id="marker"></div>
    </ul> 
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ionicons.com/">
    <script>
        let marker = document.querySelector('#marker');
        let list = document.querySelectorAll('ul li');
        function moveIndicator(e){
            marker.style.top = e.offsetTop+'px';
            marker.style.width = e.offsetWidth+'px';
        }

        list.forEach(link => {
            link.addEventListener('mousemove', (e) => {
                moveIndicator(e.target);
            })
        })
       function activeLink(){
        list.forEach((item) =>
        item.classList.remove('active'));
        this.classList.add('active');
       }

       list.forEach((item) =>
       item.addEventListener('mouseover', activeLink));
    </script>
<!---------------------------------------------------------------------------------------------->
<div>
<table>
    <tr>
        <td class="cell" id="0"></td>
        <td class="cell" id="1"></td>
        <td class="cell" id="2"></td>
    </tr>
    <tr>
        <td class="cell" id="3"></td>
        <td class="cell" id="4"></td>
        <td class="cell" id="5"></td>
    </tr>
    <tr>
        <td class="cell" id="6"></td>
        <td class="cell" id="7"></td>
        <td class="cell" id="8"></td>
    </tr>
</table>
<div class="endgame">
    <div class="text"></div>
</div>
<script src="chess.js" type="text/javascript" charset="utf-8"></script>
</div>
</body>
</html>